<template>
  <div class="md-list">
    <div class="noList" v-if="recordLists.length <= 0">
      没有记录
    </div>
    <template v-for="value in recordLists">
      <p class="nav">{{ $index === 0 || (value.interval !== recordLists[$index - 1].interval) ? value.interval : '' }}</p>
      <div class="lst-ct" v-link="'pay-details?orderId=' + value.id">
        <div class="md-title">
          <span class="md-lf">{{ value.payFee/100 | currency "" }}</span>
          <span class="center">RMB</span>
          <span class="md-rt grey">充值成功</span>
        </div>
        <div class="grey ct-font">{{ value.goodsName }}</div>
      </div>
    </template>
  </div>
  <div v-show="loadingBottom" class="loading-bottom">没有更多数据</div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        loadingBottom: false,
        pageNum: 1,
        pageSum: 0,
        recordLists: []
      };
    },
    methods: {
      async scroll() {
        if (document.documentElement.scrollHeight - document.body.scrollTop <= document.documentElement.clientHeight) {
          this.loading = true;
          this.pageNum ++;
          let getRecharges = await AJAX.getRecharges({
            openId: "openId=" + this.$root.openId,
            dateType: "dateType=",
            pageNum: "pageNum=" + this.pageNum
          });
          this.recordLists = this.recordLists.concat(getRecharges.recordList);
          this.loading = false;
          this.pageSum = getRecharges.pageSum + 1;
          if (this.pageNum > this.pageSum) {
            this.loadingBottom = true;
            setTimeout(() => {
              this.loadingBottom = false;
            }, 2000);
          }
        }
      }
    },
    async ready() {
      let getRecharges = await AJAX.getRecharges({
        openId: "openId=" + this.$root.openId,
        dateType: "dateType=",
        pageNum: "pageNum=" + this.pageNum
      });
      // getRecharges.recordList[3].payTime = 1433152821000;
      getRecharges.recordList.forEach((v, k) => {
        let date = new Date(v.payTime);
        let interval = date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
        getRecharges.recordList[k].interval = interval;
      });
      this.recordLists = getRecharges.recordList;
      window.onscroll = () => {
        this.scroll();
      };
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .md-list{
    position: absolute;
    margin-bottom: 3rem;
    width:100%;
    color:#404040;
    font-size: .7rem;
    background-color: #EBEBEB;
    .nav{
      margin: 1rem .5rem 0 .5rem;
      color: #A6A6A6;
    }
    .lst-ct{
      border-radius: .3rem;
      background-color: #fff;
      margin:.3rem;
      padding:.3rem ;
      .md-title{
        line-height: 1rem;
        .md-lf{
          float:left;
          font-size: .8rem;
        }
        .center{
          font-size: .5rem;
          float: left;
          margin-left: .2rem;
        }
        .md-rt{
          float: right;
        }
      }
      .ct-font{
        clear: both;
        padding-top: .5rem;
      }
      .grey{
        color:#A6A6A6;
      }
    }
  }
  .loading-bottom{
    position: fixed;
    border:1px solid #000;
    bottom: 30%;
    left: 35%;
    background-color: #000;
    color: #fff;
    font-size: .6rem;
    padding:1rem;
    border-radius: .3rem;
    opacity: .6;
  }
  .noList{
    text-align: center;
    padding-top: 3rem;
    font-size: 1rem;
  }
</style>
